<template>
  <button @click="flag = !flag">切换</button>
  <transition @before-enter="enterFrom" @enter="enterActive" @after-enter="enterTo" @enter-cancelled="enterCancel"
              @before-leave="leaveFrom" @leave="leaveActive" @after-leave="leaveTo" @leave-cancelled="leaveCancel">
    <div class="box" v-show="flag"></div>
  </transition>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import gsap from 'gsap'

const flag = ref(true)
const enterFrom = (el: Element) => {
  gsap.set(el, {
    width: 0,
    height: 0
  })
}
const enterActive = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 300,
    height: 300,
    onComplete: done
  })
}
const enterTo = (el: Element) => {
  console.log(1)
}
const enterCancel = (el: Element) => {
  console.log(3)
}

const leaveFrom = (el: Element) => {
  gsap.set(el, {
    width: 300,
    height: 300
  })
}
const leaveActive = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: done
  })
}
const leaveTo = (el: Element) => {
  console.log(2)
}
const leaveCancel = (el: Element) => {
  console.log(4)
}

</script>

<style lang='scss' scoped>

.box {
  background-color: red;
  width: 300px;
  height: 300px;
}
</style>